<script>
import { Table as YsTable, TableUtils } from '@/components/YS/Table'
import api from '@/api'
import treeUtils from '@/utils/tree'

export default {
  name: 'AdminResourceIndex',
  components: {
    YsTable
  },
  data () {
    return {
      tableConfig: {
        tableTitle: '菜单规则列表',
        sorter: {
          field: 'weigh',
          order: 'ascend'
        },
        extend: {
          actions: {
            add: () => import('./add'),
            detail: () => import('./detail'),
            edit: () => import('./edit'),
            del: api.admin.resource.del,
            multi: api.admin.resource.multi
          }
        },
        toolbars: [{
          name: 'delete',
          formatter: (t) => {
            const props = {
              name: 'delete',
              url: '',
              icon: 'delete',
              title: this.__('table.delete'),
              text: this.__('table.delete'),
              type: 'danger',
              disabled: !t.defaultConfig.rowSelection || t.defaultConfig.rowSelection.selectedRowKeys.length <= 0
            }
            const on = {
              click: (e) => {
                const p = {}
                p[t.defaultConfig.rowKey] = t.getSelectedRowsValueByKey(t.defaultConfig.rowKey).join(',')
                this.onDelete(t, p)
              }
            }
            return <a-button {...{ props, on }}> {this.__('删除')} </a-button>
          }
        }, {
          name: 'multi',
          formatter: (t) => TableUtils.formatter.toolbars.multi({
            'field=status&value=1': <span><a-icon type="eye" />{this.__('状态设为正常')}</span>,
            'field=status&value=0': <span><a-icon type="eye-invisible" />{this.__('状态设为隐藏')}</span>
          }, t)
        }],
        // 加载数据方法 必须为 Promise 对象
        url: (params) => {
          return api.admin.resource.index(params).then(response => {
            treeUtils.init(response.data.data.rows)
            response.data.data.rows = treeUtils.getTreeArray(0)
            return Promise.resolve(response)
          })
        },
        tableToolsButtons: [],
        showPagination: false,
        showSearch: false,
        showRowSelection: row => { return !!row.disabled }, // 复选框 (动态渲染)
        childrenColumnName: 'childlist',
        expandIconColumnIndex: 2,
        defaultExpandAllRows: true,
        expandIcon: (props) => {
          if (props.record.childlist.length === 0) {
            return true
          }
          if (props.expanded) {
            return <a onClick={e => {
              props.onExpand(props.record, e)
            }}><a-icon type="caret-down" /></a>
          } else {
            return <a onClick={e => {
              props.onExpand(props.record, e)
            }}><a-icon type="caret-right" /></a>
          }
        },
        rowKey: 'id',
        columns: [
          { title: this.__('ID'), dataIndex: 'id', width: 80 },
          {
            title: this.__('名称'),
            dataIndex: 'title',
            ellipsis: true,
            formatter: (val, row, index, column, t) => {
              return (row.spacer.toString() + row.title)
            }
          },
          { title: this.__('路由'), dataIndex: 'path', ellipsis: true },
          { title: this.__('资源'), dataIndex: 'resource', ellipsis: true },
          {
            title: this.__('类型'),
            dataIndex: 'type',
            width: 80,
            searchList: {
              '1': this.__('菜单'),
              '2': this.__('节点')
            },
            formatter: TableUtils.formatter.tag
          },
          {
            title: this.__('状态'),
            dataIndex: 'status',
            width: 80,
            searchList: {
              '1': this.__('正常'),
              '0': this.__('隐藏')
            },
            formatter: TableUtils.formatter.status
          },
          { title: this.__('权重'), dataIndex: 'weigh', width: 80 },
          {
            title: this.__('table.operate'),
            width: 130,
            buttons: [
              {
                name: 'del',
                title: this.__('删除'),
                text: this.__('删除'),
                events: {
                  click: (e, val, row, index, column, t) => {
                    const p = {}
                    p[t.defaultConfig.rowKey] = row[t.defaultConfig.rowKey]
                    this.onDelete(t, p)
                  }
                }
              }
            ],
            formatter: TableUtils.formatter.operate
          }
        ]
      }
    }
  },
  methods: {
    onDelete (t, p) {
      t.$confirm({
        title: '确定要删除吗?',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          return t.defaultConfig.extend.actions.del(p).then(() => {
            t.$notification['success']({
              message: '操作成功',
              description: '删除成功',
              duration: 4
            })
            window.location.reload()
          })
        }
      })
    }
  },
  render () {
    return (<page-header-wrapper>
      <a-card bordered={false}>
        <ys-table config={this.tableConfig}></ys-table>
      </a-card>
    </page-header-wrapper>)
  }
}
</script>
